<template>
  <div class="ele-body">
    <headPreviewStatuss></headPreviewStatuss>

    <siteSearch @search="reload"></siteSearch>
    <el-card :body-style="{ paddingTop: '8px' }">
      <ele-pro-table ref="tableRef"
                     row-key="noticeId"
                     :columns="columns"
                     :datasource="datasource"
                     highlight-current-row
                     :bottom-line="false"
                     cache-key="systemNoticeTable">
        <template #toolbar>
          <el-button type="primary"
                     @click="modify()"
                     class="ele-btn-icon"
                     icon="el-icon-plus">
            新建
          </el-button>
          <!-- <el-button type="danger"
					   class="ele-btn-icon"
					   icon="el-icon-delete">
			  删除
			</el-button> -->
        </template>
        <template #siteStatus="{ row }">
          <el-tag :underline="false"
                  :type="siteStatusType(row.status).type">
            {{ siteStatusType(row.status).status }}
          </el-tag>
        </template>
        <!-- 用户信息 -->
        <!-- <template #userInformation="{ row }">
          <div>{{ row.contactPerson }}</div>
          <div>{{ row.contactNumber }}</div>
        </template> -->
        <template #siteInformation="{ row }">
          <div class="realNameStyle">
            <!-- <img class="avaterName"
                 :src="row.logo?row.logo:require('/src/assets/微信图片_20231129095522.png')"
                 alt="" /> -->
            <div>
              <div>{{ row.name }}</div>
              <div>{{ row.url }}</div>
            </div>
          </div>
        </template>
        <template #action="{ row }">
          <el-link type="primary"
                   :underline="false"
                   @click="modify(row)">
            修改
          </el-link>
          <el-popconfirm class="ele-action"
                         :title="`是否确定要${row.status == 1 ? '冻结' : '解冻'}`"
                         @confirm="freeze(row)">
            <template v-slot:reference>
              <el-link type="primary"
                       :underline="false">
                {{ row.status == 1? '冻结 ' : '解冻' }}
              </el-link>
            </template>
          </el-popconfirm>
          <!-- <el-popconfirm class="ele-action"
                         title="是否要把密码重置为123456"
                         @confirm="resettingPassword(row)">
            <template v-slot:reference>
              <el-link type="primary"
                       :underline="false"> 重置密码 </el-link>
            </template>
          </el-popconfirm> -->
          <!-- <el-popconfirm class="ele-action"
                         title="是否确定要删除该条信息"
                         @confirm="remove(row)">
            <template v-slot:reference>
              <el-link type="danger"
                       :underline="false"> 删除 </el-link>
            </template>
          </el-popconfirm> -->
        </template>
      </ele-pro-table>
    </el-card>
    <drawerEdit :data="current"
                :drawerEditBoolen.sync="drawerEditBoolen"
                @done="reload"></drawerEdit>
  </div>
</template>
  
  <script>
import { pirate } from '@/api/version/index'
import { siteListArr } from './constant/constant';
import headPreviewStatuss from './components/headPreviewStatuss.vue';
import siteSearch from './components/siteSearch.vue';
import {

  platformList, platformStatus
} from '@/api/siteList/index.js';
import drawerEdit from './components/drawerEdit.vue';
export default {
  name: 'siteList',
  components: {
    drawerEdit,
    siteSearch,
    headPreviewStatuss
  },
  data () {
    return {
      siteListArr,
      // 当前编辑数据
      current: null,
      // 表格列配置
      columns: [
        {
          type: 'selection',
          columnKey: 'selection',
          width: 48,
          align: 'center',
          fixed: 'left'
        },
        {
          type: 'index',
          columnKey: 'index',
          width: 48,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'siteInformation',
          label: '站点信息',
          width: 180,
          showOverflowTooltip: true,
          slot: 'siteInformation'
        },

        {
          prop: 'recharge',
          label: '充值金额',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'consumption_amount',
          label: '消费金额',

          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'siteStatus',
          label: '状态',

          align: 'center',
          showOverflowTooltip: true,
          slot: 'siteStatus'
        },

        {
          prop: 'user_count',
          label: '用户量',

          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'create_time',
          label: '创建时间',

          align: 'center',
          showOverflowTooltip: true,
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
          }
        },

        {
          prop: 'expire_time',
          label: '到期时间',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
          }
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 230,
          align: 'center',
          slot: 'action',
          fixed: 'right'
        }
      ],
      // 表格选中数据
      selection: [],
      // 抽屉是否显示
      drawerEditBoolen: false
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },

    // 状态
    siteStatusType () {
      return function (siteType) {
        if (siteType == '1') {
          return {
            status: '未冻结 ',
            type: 'primary'
          };
        } else if (siteType == '2') {
          return {
            status: '冻结',
            type: 'danger '
          };
        }
      };
    }
  },
  activated () {
    this.init()
  },
  methods: {
    async init () {
      const res = await pirate()
      console.log(res)
    },
    // 点击查看详情弹出详情抽屉
    async modify (row) {
      //   const res = await topUpRecords()
      if (row?.id) {


        this.current = row
        // 用户余额管理
        this.drawerEditBoolen = !this.drawerEditBoolen;
      } else {
        this.drawerEditBoolen = !this.drawerEditBoolen;
        this.current = null;
      }
    },

    // 冻结该条信息
    async freeze (row) {
      console.log(row.id);
      const res = await platformStatus({
        id: row.id,
        status: row.status == '1' ? '2' : '1'
      });
      console.log(res);
      this.reload();
      this.$message.success(res.message);
    },
    // 重置密码为123456
    async resettingPassword (row) {
      console.log(row.id);
      const res = await siteModify({
        id: row.id,
        password: '123456',
        account: row.account
      });
      console.log(res);
      this.reload();
      this.$message.success(res);
    },
    /* 表格数据源 */
    datasource ({ page, limit, where, }) {
      return platformList({ page, limit, ...where });
    },
    /* 刷新表格 */
    reload (where) {
      console.log(where);
      this.$refs.tableRef.reload({ page: 1, where: where });
    },

    /* 删除 */
    // remove (row) {
    //   const loading = this.$loading({ lock: true });
    //   siteDelete({
    //     id: row.id,
    //     account: row.account
    //   })
    //     .then((msg) => {
    //       console.log(msg);
    //       loading.close();
    //       this.$message.success(msg);
    //       this.reload();
    //     })
    //     .catch((e) => {
    //       loading.close();
    //       this.$message.error(e.message);
    //     });
    // },

  }
};
  </script>
  <style lang="less" scoped>
.realNameStyle {
  display: flex;
  justify-content: start;
  align-items: center;
  .avaterName {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    vertical-align: middle;
    margin-right: 5px;
  }
}
</style>
  